const {src,dest, parallel, series} = require('gulp');
const cleancss = require('gulp-clean-css');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const del = require('del');
const htmlmin = require('gulp-htmlmin');
var browserSync = require('browser-sync').create();

const copy = ()=>{
    return src('src/**',{base:"src"}).pipe(cleancss()).pipe(dest('dist'));
}
const style = ()=>{
    return src('src/css/style.css',{base:"src"})
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(rename({extname:".min.css"}))
    .pipe(dest('dist'));
}
const script = ()=>{
    return src('src/js/main.js',{base:"src"})
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(rename({extname:".min.js"}))
    .pipe(dest('dist'))
}
const html = ()=>{
    return src('src/index.html')
    .pipe(htmlmin({ 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
     }))
    .pipe(dest('dist'));
}

const clean = ()=>{
    return del(['dist'])
}

const serve = ()=>{
    return browserSync.init({
        server: {
            baseDir: "./dist"
        },
        port: 8080
    });
}

const build = parallel(style,script,html)
const dev = series(clean,build);

module.exports = {
    style,
    script,
    clean,
    html,
    serve
}